/**
 *
 *
 * aa
 */
import React, { Component } from "react";
import "./05.css";
let msgs = [
  {
    role: "me",
    message: "hello",
  },
  {
    role: "ai",
    message: "may i help you?",
  },
  {
    role: "me",
    message: "你是谁???",
  },
  {
    role: "ai",
    message: "我是 ChatGPT AI 助手!!!",
  },
];

export default class ChatCom extends Component {
  render() {
    return (
      <div className="container">

        {
          msgs.map((item, index) => {
            return <div key={index} className="wrapper">
                    <div className={`msg-item ${item.role === 'me' ? 'right' : 'left'}`}>{item.message}</div>
                  </div>
          })  
        }
      </div>
    );
  }
}
